<template>
    <div class="moveBtn" @click="$emit('on-click')" @touchstart="touchstart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
        <van-button>{{name}}</van-button>
    </div>
</template>
<script>
    export default {
        props: {
            name: {
                type: String,
                default: '返回'
            }
        },
        data () {
            return {
                timeOutEvent: 0,
                longClick: 0,
                // 手指原始位置
                oldMousePos: {},
                // 元素原始位置
                oldNodePos: {},
                btnType: 'right'
            };
        },
        methods: {
            touchstart (ev) {
                // 定时器控制长按时间，超过500毫秒开始进行拖拽
                this.timeOutEvent = setTimeout(() => {
                    this.longClick = 1;
                }, 300);
                const selectDom = ev.currentTarget;
                const { pageX, pageY } = ev.touches[0]; // 手指位置
                const { offsetLeft, offsetTop } = selectDom; // 元素位置
                // 手指原始位置
                this.oldMousePos = {
                    x: pageX,
                    y: pageY
                };
                // 元素原始位置
                this.oldNodePos = {
                    x: offsetLeft,
                    y: offsetTop
                };
                selectDom.style.left = `${offsetLeft}px`;
                selectDom.style.top = `${offsetTop}px`;
            },
            touchMove (ev) {
                // 未达到500毫秒就移动则不触发长按，清空定时器
                clearTimeout(this.timeOutEvent);
                if (this.longClick === 1) {
                    const selectDom = ev.currentTarget;
                    // x轴偏移量
                    const lefts = this.oldMousePos.x - this.oldNodePos.x;
                    // y轴偏移量
                    const tops = this.oldMousePos.y - this.oldNodePos.y;
                    const { pageX, pageY } = ev.touches[0]; // 手指位置
                    selectDom.style.left = `${pageX - lefts}px`;
                    selectDom.style.top = `${pageY - tops}px`;
                }
            },
            touchEnd (ev) {
                // 清空定时器
                clearTimeout(this.timeOutEvent);
                if (this.longClick === 1) {
                    this.longClick = 0;
                    const selectDom = ev.currentTarget;
                    const { clientWidth, clientHeight } = document.body;
                    const { offsetLeft, offsetTop } = selectDom;
                    selectDom.style.left =
                        (offsetLeft + 50) > (clientWidth / 2) ?
                            'calc(100% - 70px)' : '30px';
                    if (offsetTop < 90) {
                        selectDom.style.top = '90px';
                    } else if (offsetTop + 90 > clientHeight) {
                        selectDom.style.top = `${clientHeight - 90}px`;
                    }
                    this.btnType =
                        (offsetLeft + 50) > (clientWidth / 2) ?
                            'right' : 'left';
                }
            }
        }
    };
</script>

<style scoped lang="less">
    .moveBtn {
        position: fixed;
        right: 28px;
        top: 85%;
        z-index: 9;
        .van-button {
            width: 43px;
            height: 43px;
            border-radius: 50%;
            text-align: center;
            line-height: 43px;
            background: #757474f5;
            color: #fff;
            font-size: 11px;
            padding: 0;
        }
    }
</style>